<template>
  <a-spin :spinning="loading">
    <a-modal v-model="detailModal" :footer="null" title="订单详情" width="60%">
      <!--   <a-spin class="my-20 flex justify-center		" v-if="modalLoading"  /> -->
      <section class="p-8 pl-24" style="background: #f0f0f0">用户信息：</section>
      <section class="flex flex-wrap mt-10 pl-24">
        <div class="mb-10" style="width: 50%">下单人：{{ details.petsDO.userName }}</div>
        <div class="mb-10" style="width: 50%">下单手机号：{{ details.orderMobile }}</div>
      </section>
      <section class="p-8 pl-24" style="background: #f0f0f0">宠物信息：</section>
      <section class="flex flex-wrap mt-10 pl-24" v-if="details.petsDO">
        <div class="mb-10" style="width: 50%">宠物昵称：{{ details.petsDO.name }}</div>
        <div class="mb-10" style="width: 50%">年龄：{{ details.petsDO.age }}</div>
        <div class="mb-10" style="width: 50%">
          宠物照片：<img :src="details.petsDO.avatar" style="width: 100px; height: 100px" />
        </div>
        <div class="mb-10" style="width: 50%">是否绝育：{{ details.petsDO.sterilization==1?'是':'否' }}</div>
        <div class="mb-10" style="width: 50%">宠物类型：{{ details.petsDO.occurrenceTime }}</div>
        <div class="mb-10" style="width: 50%">宠物分类：{{ details.petsDO.occurrenceTime }}</div>
        <div class="mb-10" style="width: 50%">出生日期：{{ details.petsDO.birthday }}</div>
        <div class="mb-10" style="width: 50%">宠物性别：{{ details.petsDO.gender==1?'雄':'雌' }}</div>
      </section>
      <section class="p-8 pl-24" style="background: #f0f0f0">订单信息：</section>
      <section class="flex flex-wrap mt-10 pl-24">
        <div class="mb-10" style="width: 50%">订单号：{{ details.no }}</div>
<!--        <div class="mb-10" style="width: 50%">-->
<!--          下单时间：{{ details.totalPrice ? $utils.formatTimestamp(details.totalPrice) : '' }}-->
<!--        </div>-->
        <div class="mb-10" style="width: 50%">支付金额：{{ details.totalPrice/100 }}</div>
        <div class="mb-10" style="width: 50%">支付时间：{{ details.payTime ? $utils.formatTimestamp(details.payTime) : '' }}</div>
        <div class="mb-10" style="width: 50%">
          订单状态：{{ details.status == 0 ? '待付款' : details.status == 1 ? '服务中' : '已完成' }}
        </div>
        <div class="mb-10" style="width: 50%">订单类型：{{ typeList[details.type]}}</div>
      </section>
    </a-modal>
  </a-spin>
</template>
<script>
import { doctorDetail } from '@/api/baseInfo'
export default {
  data() {
    return {
      loading: false,
      details: {},
      detailModal: false,
      typeList: {
        '1': '图文',
        '2': '电话',
        '3': '音视频'
      },
    }
  },
  computed: {},
  watch: {},
  async created() {},
  methods: {
    getData(val) {
      try {
        this.loading = true
        doctorDetail({
          id: val.id,
        })
          .then((data) => {
            this.details = data
          })
          .finally(() => (this.loading = false))
      } catch (error) {
        this.loading = false
        console.log(error)
      }
    },
    open(data) {
      console.log(data)
      this.detailModal = true
    },
  },
}
</script>
<style lang="less" scoped>
/deep/.ant-modal-body {
  padding-left: 0;
  padding-right: 0;
}

/deep/.GasolineRate {
  .ant-form-item-label {
    width: 100px !important;
    margin-bottom: 10px;
    text-align: right;
  }

  .searchBox {
    margin-bottom: 10px;
  }
}

.GasolineRateModal-row {
  .label {
    width: 150px;
    display: inline-block;
    vertical-align: top;
  }

  .ant-col {
    margin-bottom: 15px !important;
  }
}
</style>